<template>
    <div style="width: 100%; height: 100%" ref="elEcharts" />
  </template>
  <script setup lang="ts">
  import { shallowRef, onMounted, watch } from 'vue'
  import { useEcharts, type EChartsCoreOption } from '../hooks/useEcharts'
  import { useThemeStore } from "../store/modules/themeStore"

  interface Props {
    options: EChartsCoreOption,
    refreshChart: Boolean
  }
  const props = defineProps<Props>()
  const themeStore = useThemeStore()
  const elEcharts = shallowRef()
  const currentOptions = shallowRef(props.options)
  const { setOptions, initCharts, echartsResize } = useEcharts(elEcharts, currentOptions.value)
  
  watch(
    () => props.options,
    (nVal) => {
      let targetOptions: EChartsCoreOption = {}
      if (themeStore.currentColorArray && themeStore.currentColorArray.length > 0) {
        targetOptions = { ...nVal }
        targetOptions.color = themeStore.currentColorArray
      } else {
        targetOptions = { ...nVal }
      }
      setOptions(targetOptions)
    }
  )

  watch(()=>props.refreshChart, (nVal) => {
    if(nVal) echartsResize()

  })
  
  onMounted(() => {
    initCharts()
  })
  </script>